window.addEventListener("load", function () {
	// 海量aAPL区
	//1获取相关节点
	// $("#apiList li");
	//2.绑定移入移出事件
	//是个数组,需要遍历拿到每一个
	// let oldUrl = ""; //变量提升
	// $("#apiList li").forEach(function (v) {
	// 	// console.log(v);  拿到
	// 	//给v就是每个li绑定移入事件
	// 	v.addEventListener("mouseover", function () {
	// 		//移入背景颜色变蓝色
	// 		this.style.backgroundColor = "#2f7ee9";
	// 		//文字变白
	// 		this.style.color = "#fff";
	// 		//获取我们li第一个儿子的图片路径
	// 		let imgUrl = this.firstElementChild.src;
	// 		// 替换图片路径
	// 		this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
	// 		oldUrl = imgUrl;
	// 	});
	// 	//3-1移出事件
	// 	v.addEventListener("mouseout", function (v) {
	// 		//移出背景颜色变白色
	// 		this.style.backgroundColor = "#fff";
	// 		//文字变黑
	// 		this.style.color = "#000";
	// 		//切换为原来图片
	// 		this.firstElementChild.src = oldUrl;
	// 	});
	// });

	//获取li节点遍历
	// $("#apiList li");
	// console.log($("#apiList li"));
	let cf = "";
	$("#apiList li").forEach(function (v) {
		v.addEventListener("mouseover", function () {
			this.style.background = "blue";
			this.style.color = "#fff";
			//获取我们li里面图片路径
			let imgUrl = this.firstElementChild.src;
			// console.log(this.firstElementChild.src);
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			cf = imgUrl;
		});
		//移出
		v.addEventListener("mouseout", function () {
			this.style.background = "#fff";
			this.style.color = "black";
			this.firstElementChild.src = cf;
		});
	});
});

// 功能二独角兽轮播图
//unicorncont全部叠在一起
//1.获取相关节点
const unicornConts = $(".unicorncont");
unicornConts[0].style.opacity = "1"; //默认显示第0张
let index = 1;
//2.开启周期定时器,每个三秒显示
this.window.setInterval(function () {
	//3.通过节点数组索引对应要显示的unicorncont
	//排他思想
	unicornConts.forEach(function (v, i) {
		// console.log(v);
		v.style.opacity = "0";
	});
	//4.通过索引显示对应内容,其他不显示
	unicornConts[index].style.opacity = "1";
	//5.设置索引变量,每隔一个周期++
	index++;
	//6.当索引达到最大限度时要恢复初始状态
	if (index > unicornConts.length - 1) {
		index = 0;
	}
}, 3000);

// 功能三,精灵图点击回到顶部
const returnList = document.querySelector("#Return");
returnList.addEventListener("click", function () {
	//2.点击后回到顶部
	// console.log(11);
	window.scrollTo({
		left: 0,
		top: 0,
		// 缓慢上去
		behavior: "smooth",
	});
});

//banner图
var mySwiper = new Swiper(".swiper", {
	// autoplay: true, //可选选项，自动滑动
	autoplay: {
		delay: 1000, //1秒切换一次
	},
	pagination: {
		el: ".swiper-pagination",
		// 三个小点点点击
		clickable: true,
	},
});

//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper(".swiper");
var mySwiper = document.querySelector(".swiper").swiper;
mySwiper.slideNext();
